<template lang="html">
  <section class="component-book_court_top">
    <div class="book_top_content">
		<div class="book_top_item" v-for="(item,index) in seletedDate"  @click="SeletedDay(index+1)" :class="{ active: (index+1) == currentIndex }">
				<div class="select_item" :class="{ active: (index+1) == currentIndex }" @click="SeletedDay(index+1)">
					<p>{{item.date}}</p>
					<p>{{item.date_week}}</p>
				</div>
     	</div>
 	</div>
  </section>
</template>

<script>
export default {
  props: {
    seletedDate: {
	  type: Array,
	  requried: true
	  }
  },
  data(){
	return {
		scrollerEle: null
	}
  },
  computed: {
    currentIndex(){
      return this.$store.state.indexData.currentIndex
    }
  },
  methods: {
  	SeletedDay(index){
  	  this.$store.dispatch('setCurrentIndex', index)
    }
  },
  watch: {
    currentIndex(val){
      if(val >= 5){
        this.scrollerEle.scrollLeft = 999
      } else if(val <= 4){
        this.scrollerEle.scrollLeft = 0
      }
    }
  },
  mounted(){
    this.scrollerEle = document.querySelector('.book_top_content')
    this.$emit('eSelectDay', this.currentIndex)
  },
}
</script>

<style lang="scss" scoped>
.component-book_court_top{
  background-color: #494b47;
	.book_top_content{
		margin-left: 10px;
		overflow-x: scroll;
		white-space: nowrap;
		overflow-y: hidden;
		.book_top_item{
			color: #e2e2e2;
			display: inline-block;
			width: 150px;
			height: 100px;
			margin: 0 0px 5px 0px;
			text-align: center;
			line-height: 100px;
			.select_item{
				margin: 0 auto;
				margin-top: 18px;
				border-bottom: 5px solid #767873;
				width: 130px;
				height: 70px;
				p{
					line-height: 30px;
				}
				&.active{
					border-bottom: 5px solid #f67c87;
				}
			}
			&.active{

				background-color: #1f2120;
				color: #ff4907;
			}
		}
	}
}
</style>
